<template>
  <div class="my">
    <van-cell-group class="banner" v-if="isLogin">
      <!-- {{ $store.state.a }}
      {{a}} -->
      <!-- <button @click="$store.state.a++">+</button> -->
      <!-- <button @click="change">+</button> -->
      <van-cell class="banner-style" center :border="false"  @click="$router.push('/user_edit')">
        <van-image
          class="my-name-icon"
          slot="icon"
          round
          fit="cover"
          :src="userInfo.avatar"
        />

        <div class="name" slot="title">{{ userInfo.nickname }}</div>
        <van-button class="change-btn" size="small" round>
          编辑资料
        </van-button>
      </van-cell>
      <van-grid class="tt-hz" :border="false" column-num="2">
        <van-grid-item class="tt-hz-item">
          <div slot="text" class="text-style">
            <div class="count">{{publish_num}}</div>
            <div class="text">头条</div>
          </div>
        </van-grid-item>
        <van-grid-item class="tt-hz-item">
          <div class="text-style" slot="text">
            <div class="count">{{liked_num}}</div>
            <div class="text">获赞</div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <div class="not-login" v-else @click="$router.push('/login')">
      <div class="banner1">
        <img class="mobile" src="../assets/tel.png" />
      </div>
      <div class="text">登录 / 注册</div>
    </div>
    <!-- 收藏历史 -->
    <div class="sl">
      <van-grid :column-num="2">
        <van-grid-item>
          <span>
            <svg class="my-sl-icon" aria-hidden="true">
              <use xlink:href="#icon-collection"></use>
            </svg>
          </span>
          <span>收藏</span>
        </van-grid-item>
        <van-grid-item>
          <span>
            <svg class="my-sl-icon" aria-hidden="true">
              <use xlink:href="#icon-history"></use>
            </svg>
          </span>
          <span>历史</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 改密联系关于 -->
    <van-cell title="修改密码" is-link to="/xgmm" />
    <van-cell title="联系我们" is-link to="/lxwm" />
    <van-cell title="关于我们" is-link to="/gywm" />
    <!-- 退出登录 -->
    <van-cell
      class="logout-cell"
      title="退出登录"
      @click="logout"
      v-if="isLogin"
    />
  </div>
</template>


<script>
import { mapState, mapMutations } from "vuex";
import { Dialog } from "vant";
// mapState 小工具
export default {
  name: "my",
  computed: {
    ...mapState(["userInfo", "isLogin",'publish_num','liked_num']),
    // a(){
    //   return this.$store.state.a
    // }
  },
  created() {},
  methods: {
    ...mapMutations(["clear"]),
    // clear(){
    //   this.$store.commit('clear')
    // },
    // change() {
    // this.$store.state.a = "您好";//不推荐
    // 可以追踪数据的变化
    // this.$store.commit('changea',12345)
    // },
    async logout() {
      //模态框
      try {
        await Dialog.confirm({
          title: "提示",
          message: "确认退出登录吗?",
        });

        localStorage.clear();
        this.clear();
      } catch (error) {}
    },
  },
};
</script>

<style lang="less">
.banner {
  background: url(../assets/banner.jpg) no-repeat;
  background-size: cover;
}
.not-login {
  height: 180px;
  background: url("~@/assets/banner.jpg") no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}
.logout-cell {
  background-color: #f2f2f2;
  text-align: center;
  color: #d86262;
}
.banner-style {
  background-color: unset;
  padding-top: 38px;
  padding-bottom: 11px;
}
.my-name-icon {
  width: 5em;
  height: 5em;
  margin-right: 11px;
}
.my-sl-icon {
  width: 2em;
  height: 2em;
}
.change-btn {
  height: 24px;
  font-size: 12px;
  color: #666666;
}
.name {
  font-size: 15px;
  color: #fff;
}
.tt-hz-item {
  height: 65px;
  color: #fff;
}
.van-grid-item__content {
  background-color: unset;
}
.text-style {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.count {
  font-size: 18px;
}
</style>
